<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>宠爱有家店铺管理系统</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>

    <script src="js/bootstrap.min.js"></script>
    <script src="js/jsrender.js"></script>
    <script src="js/jsrender.min.js"></script>
<style>
.city-picker-span { width:300px;}
.modal-row{
    margin-top: 30px;
}
</style>
</head>

<body >
<div class="headiv" style="background: #000000;">
	<div class="logotag">
       <h1>
       <font size="" color="white">宠爱有家店铺管理</font>
       </h1>
        <b class="line"></b>
    </div>
    
    
</div>

<div class="messagebox">
	<div class="messageleft">
    	<ul class="Fstage">
        	<li><a href="#"><em class="e1"></em>店铺管理<div class="clear"></div></a>
                <ul class="Tstage" >
                    <li><a href="账号管理.html">账号管理</a></li>
                    <li><a href="上架新品.html">上架新品</a></li>
                    <li><a href="物流详情.html">物流详情</a></li>
                    <li><a href="订单详情.html">历史订单</a></li>
                </ul>
            </li>

           
        </ul>
    </div>
    <div class="messageright">
    	<div class="formpage">
        	<div class="clear" style="height:20px"></div>
        	<h2>物流单号信息
            	<a class="greenbtn add" onclick="callback()" href="#">新增</a>
            </h2>
            <div class="clear" style="height:30px"></div>
          	
            <span class="information">
            	<div class="clear" style="height:10px"></div>
            	
                <form class="datable">
                    <table width="100%" id="table-render" border="1" cellpadding="0" cellspacing="0">
                        <thead>
                            <tr>
                                <th width="30%" name="orderID">订单号</th>
                                <th width="10%" name="buyers">购买者</th>
                                <th width="10%" name="price">单价</th>
                                <th width="10%" name="quantity">数量</th>
                                <th width="10%" name="payment">实付款</th>
                                <th width="10%" name="status">交易状态</th>
                                <th width="10%" name="date">下单时间</th>
                                <th width="10%">操作</th>
                            </tr>
                        </thead>
                        <tbody id="list">

                        </tbody>

                    </table>
                </form>
                <div class="clear"></div>
            </span>
            <div class="clear" style="height:50px"></div>
           
            
        </div>
    </div>
    <div class="clearh" style="height:0"></div>
</div>


<!--弹出新增层-->

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"><text>物流信息修改</text></h4>
                <input type="hidden" id="order-id" value="">
            </div>
            <div class="modal-body">
                <div class="row modal-row">
                    <div class="col-md-6">
                        <label for="orderID">订单编号(不可修改)</label>
                        <div class="input-group">

                            <input type="text" class="form-control" value="" disabled id="orderID">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="buyers-name">购买者(不可修改)</label>
                        <div class="input-group">
                            <input type="text" class="form-control form-inputs" value="" disabled id="buyers-name">
                        </div>
                    </div>
                </div>
                <div class="row modal-row">
                    <div class="col-md-6">
                        <label for="price">单价(￥)</label>
                        <div class="input-group">

                            <input type="text" class="form-control" value="" id="price">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="quantity">数量</label>
                        <div class="input-group">
                            <input type="text" class="form-control" value="" id="quantity">
                        </div>
                    </div>
                </div>
                <div class="row modal-row">
                    <div class="col-md-6">
                        <label for="payment">实付款(￥)</label>
                        <div class="input-group">

                            <input type="text" class="form-control" value="" id="payment">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="date">下单时间(不可修改)</label>
                        <div class="input-group">

                            <input type="date" class="form-control form-inputs" value="" disabled id="date">
                        </div>
                    </div>
                </div>
                <div class="row modal-row">

                    <div class="col-md-10">
                        <label>交易状态</label>
                        <div class="input-group col-md-5">
                            <select class="form-control" id="arrangeClass">
                                <option value="待付款">待付款</option>
                                <option value="待发货">待发货</option>
                                <option value="待收货">待收货</option>
                                <option value="交易成功">交易成功</option>
                                <option value="交易取消">交易取消</option>
                            </select>

                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="order-info" onclick="submitOrderInfo()">创建订单</button>
                <button type="button" class="btn btn-primary" id="submit-edit" onclick="submitInfo()">提交更改</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="display: none;">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="mySmallModalLabel">温馨提示</h4>
            </div>
            <div class="modal-body">
                <text class="modal-text"></text>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

</body>
</html>

<script id="testTmpl" type="text/x-jsrender">
<tr>
    <td>订单号:{{:orderID}} </td>
    <td>{{:buyers}}</td>
    <td>￥{{:price}}</td>
    <td>{{:quantity}}</td>
    <td>￥{{:payment}}</td>
    <td>{{:status}}</td>
    <td>{{:date}}</td>
    <td><a class="dolink" onclick="editOrder({{:id}})" href="#">修改</a></td>
</tr>
</script>

<script>

    var data = [{
        id:1001,
        orderID:'6265506578268338',
        buyers:'张三',
        price:'880',
        quantity:2,
        payment:'1760',
        status:'待收货',
        date:'2019-09-27',
    },{
        id:1002,
        orderID:'6265506578268337',
        buyers:'李四',
        price:'456',
        quantity:1,
        payment:'456',
        status:'交易成功',
        date:'2019-09-15',
    },{
        id:1003,
        orderID:'6265506578268333',
        buyers:'王二',
        price:'128',
        quantity:10,
        payment:'1280',
        status:'交易成功',
        date:'2019-08-25',
    },{
        id:1004,
        orderID:'6265506578268331',
        buyers:'周五',
        price:'99.99',
        quantity:1,
        payment:'99.99',
        status:'交易取消',
        date:'2019-08-01',
    }];

var html = $("#testTmpl").render(data);
$("#list").append(html);

function callback() {
    var order = {
        id:parseInt(data[0].id) + 1,
        orderID:parseInt(data[0].orderID) + 1,
        buyers:'',
        price:'',
        quantity:'',
        payment:'',
        status:'待收货',
        date:'2019-09-28',
    }
    $("#arrangeClass").find("option[value="+order.status+"]").prop("selected",true);
	$('.form-control').val('');
    $('#order-info').show();
    $('#submit-edit').hide();
    $('#orderID').val(order.orderID);
    $('#order-id').val(order.id);
    $('.form-inputs').removeAttr('disabled');
    $('#myModal').modal('show');
	}

function editOrder(e) {
    $('#order-info').hide();
    $('#submit-edit').show();
    $('.form-inputs').attr('disabled',true);
    for(var i = 0;i<data.length;i++){
    if(e == data[i].id){
        $('#myModal').modal('show');
        $('#orderID').val(data[i].orderID);
        $('#buyers-name').val(data[i].buyers);
        $('#price').val(data[i].price);
        $('#quantity').val(data[i].quantity);
        $('#payment').val(data[i].payment);
        $('#date').val(data[i].date);
        $("#arrangeClass").find("option[value="+data[i].status+"]").prop("selected",true);
        $("#order-id").val(data[i].id)
    }
    }
}

//修改订单
function submitInfo() {
    var id = $("#order-id").val();
   var orderID = $('#orderID').val();
    var buyers = $('#buyers-name').val();
    var price = $('#price').val();
    var quantity = $('#quantity').val();
    var payment = $('#payment').val();
    var date = $('#date').val();
    var status = $('#arrangeClass option:selected').val();
    console.log(status);
    if(status == 1){
        alert('订单状态不能为空')
        return;
    }
    for(var i = 0;i<data.length;i++){
        if(id == data[i].id){
            data[i].id = id;
            data[i].orderID = orderID;
            data[i].buyers = buyers;
            data[i].price = price;
            data[i].quantity = quantity;
            data[i].payment = parseInt(price) * parseInt(quantity);
            data[i].date = date;
            data[i].status = status;
            $('#myModal').modal('hide');
            var html = $("#testTmpl").render(data);
            $("#list").empty().append(html);
        }
    }
}

//创建订单
function submitOrderInfo() {
    var id = $("#order-id").val();
    var orderID = $('#orderID').val();
    var buyers = $('#buyers-name').val();
    var price = $('#price').val();
    var quantity = $('#quantity').val();
    var payment = $('#payment').val();
    var date = $('#date').val();
    var status = $('#arrangeClass option:selected').val();
    var orders = {
        id:id,
        orderID:orderID,
        buyers:buyers,
        price:price,
        quantity:quantity,
        payment: parseInt(price) * parseInt(quantity),
        status:status,
        date:date,
    }
    data.unshift(orders);
    $('#myModal').modal('hide');
    var html = $("#testTmpl").render(data);
    $("#list").empty().append(html);
    }
</script>
